<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
    <style>
        /* ********** 底部按钮hover交互 ********** */

        .footer-btn .footer-btn1 {
            transform: translateX(0);
        }

        .footer-btn:hover .footer-btn1 {
            transform: translateX(200%);
        }

        .footer-btn .footer-btn2 {
            transform: translateX(-200%);
        }

        .footer-btn:hover .footer-btn2 {
            transform: translateX(0);
        }

        .footer-btn-vertical .footer-btn1 {
            transform: translateY(0);
        }

        .footer-btn-vertical:hover .footer-btn1 {
            transform: translateY(-200%);
        }

        .footer-btn-vertical .footer-btn2 {
            transform: translateY(200%);
        }

        .footer-btn-vertical:hover .footer-btn2 {
            transform: translateY(0);
        }

        .w-3r {
            width: 3rem
        }

        .h-3r {
            height: 3rem;
        }

        .tran_0_5 {
            transition: all .5s;
        }
    </style>
</head>

<body class="vh-100 p-5">
    <div>
        <button type="button" class="btn btn-warning px-sm-12 py-sm-6 fs-4 d-flex align-items-center footer-btn mb-5">
            <span class="me-5">hover 向右的箭头</span>
            <div class="d-inline-block w-3r h-3r ms-12 position-relative overflow-hidden">
                <img class="w-100 h-100 position-absolute  footer-btn1 tran_0_5 start-0 top-0" src="//qn1.10soo.net/assets24/202404011127223.svg" alt="">
                <img class="w-100 h-100 position-absolute  start-0 top-0 footer-btn2 tran_0_5" src="//qn1.10soo.net/assets24/202404011127223.svg" alt="">
            </div>
        </button>
        <button type="button" class="btn btn-warning px-sm-14 py-sm-4 fs-4 d-flex align-items-center mb-4 footer-btn-vertical toTop">
            <span class="me-5">hover 向上的箭头</span>
            <div class="d-inline-block w-3r h-3r  position-relative overflow-hidden">
                <img class="w-100 h-100 position-absolute footer-btn1 tran_0_5 start-0 top-0" src="//qn1.10soo.net/assets24/202404011138915.svg" alt="">
                <img class="w-100 h-100 position-absolute  start-0 top-0 footer-btn2 tran_0_5" src="//qn1.10soo.net/assets24/202404011138915.svg" alt="">
            </div>
        </button>
    </div>
    <!-- footer -->
    <div class="container-fluid px-6 py-10 pt-sm-18 pb-sm-16 px-sm-12 bg-primary footer">
    </div>
</body>

</html>